<template>
	<div class="padding-across-10">
		<div style="width: 100%">
			<el-row>
				<el-col :span="14">
					<headerOpreate style="padding-bottom: 5px;float: left;width: 100%" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
				</el-col>
				<el-col :span="10" style="text-align: right;padding-top: 5px">
					<div class="grid-content bg-purple">
						<span style="font-size: 13px;font-weight: bold">审核状态</span>
						<el-radio-group v-model="status" @change="selectStatus">
							<el-radio :label="1">未审核</el-radio>
							<el-radio :label="2">已审核</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="width: 100%;">
			<el-row>
				<el-col :span="14">
					<span style="font-size: 13px;font-weight: bold">类型</span>
					<el-select size="small" v-model="mediaType" placeholder="请选择查询类型" style="width: 140px;" @change="selectMediaType">
						<el-option label="全部" :value="0"></el-option>
						<el-option label="音频文件(Audio)" :value="1"></el-option>
						<el-option label="视频文件(Video)" :value="2"></el-option>
					</el-select>
					<span style="font-size: 13px;font-weight: bold">关键字</span>
					<el-input style="width: 200px" size="small" v-model="creator" placeholder="根据创建者查询">
						<el-button id="searchData" slot="append" icon="search" @click="findMediaByCreator"></el-button>
					</el-input>
				</el-col>
				<el-col :span="10" style="text-align: right">
					<div class="block" style="text-align:right;float: right;padding-bottom: 2px">
						<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="名称" align="center">
				<template slot-scope="scope">
					<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="downloadMedia(scope.row)">{{ scope.row.name }}</a>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="是否存在" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.existed">存在</el-tag>
					<el-tag type="danger" v-else>不存在</el-tag>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="类型" align="center" prop="type">
				<template slot-scope="scope">
					<span>{{scope.row.type === 2 ? '音频文件(Audio)' : '视频文件(Video)'}}</span>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="属性" align="center" prop="property"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="创建者" align="center" prop="uid"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="上传时间" align="center" prop="time"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="描述" align="center" prop="desc"></el-table-column>
			<!--<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.audited" type="success">已审核</el-tag>
					<el-tag v-else type="danger">未审核</el-tag>
				</template>
			</el-table-column>-->
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center" width="200px">
				<template slot-scope="scope">
					<el-button v-if="scope.row.existed && !scope.row.audited" size="small" type="primary" @click="auditedFile(scope.row)"><i class="fa fa-check"></i>&nbsp;审核</el-button>
					<el-button v-if="scope.row.existed" size="small" type="primary" @click="preView(scope.row)"><i class="fa fa-play"></i>&nbsp;{{scope.row.type === 2 ?$t('message.audition'):$t('message.preview')}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<el-dialog :title="$t('message.insertMediaResource')" v-model="dialogUploadMedia" class="upload-section" :class="[dialog-small-width]">
			<div style="width:360px;margin:auto">
				<div style="width: 100%">
					<label>文件类型：</label>
					<el-select size="small" v-model="fileType" :placeholder="$t('message.selectModeAlert')" style="width: 45%;" @change="selectFileType">
						<!-- <el-option label="安卓应用(Apk)" :value="0"></el-option> -->
						<el-option label="音频文件(Audio)" :value="2"></el-option>
						<el-option label="视频文件(Video)" :value="3"></el-option>
						<!-- <el-option label="固件文件(Firmware)" :value="3"></el-option> -->
					</el-select>
				</div>
				<div style="width: 100%;margin-top: 5px">
					<label>审核方式：</label>
					<el-radio-group v-model="auditeModel">
						<el-radio :label="1">自动审核</el-radio>
						<el-radio :label="0">人工审核</el-radio>
					</el-radio-group>
				</div>
				<uploadSection style="margin-top: 5px" v-if="dialogUploadMedia" :upload-url="uplodaUrl" :accept-types="acceptTypes" :upload-file-type="uploadFileType" :upload-device-type="deviceType" :upload-audite-model="auditeModel" v-on:uploadComplete="uploadComplete" :usage="'1'"></uploadSection>
			</div>
		</el-dialog>
		<transition name="fade">
			<audioSection v-show="showAudioBox" :url="playAudioUrl" :name="playAudioName" v-on:closeAudioBox="closeAudioBox"></audioSection>
		</transition>
		<transition name="fade">
			<videoSection v-show="showVideoBox" :url="playVideoUrl" :name="playVideoName" v-on:closeVideoBox="closeVideoBox"></videoSection>
		</transition>
	</div>
</template>
<script>
	import $ from 'jquery'
	import headerNave from '../../../../../components/headerNave'
	import headerOpreate from '../../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../../assets/js/common.js'
	import uploadSection from '../../../../../components/upload'
	import audioSection from '../../../../../components/audioBox'
	import videoSection from '../../../../../components/videoBox'
	let id = 1000;
	export default {
		components: {
			uploadSection,
			audioSection,
			videoSection,
			headerNave,
			headerOpreate
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchData").click(); //调用登录按钮的登录事件
				}
			};
			return {
				mediaType: 0,
				creator: '',
				isReload: false,
				// localhost:'http://192.168.1.188:8081',//定义IP路径，用户下载文件使用
				status: 1,
				audited: false,
				dialogUploadMedia: false,
				uplodaUrl: '/Api/User/File/Upload',
				acceptTypes: 'mp3',
				uploadFileType: 2,
				auditeModel: 1,
				playAudioUrl: '',
				playVideoUrl: '',
				playAudioName: '',
				playVideoName: '',
				deviceType: '',
				fileType: 2, //文件类型选择框
				showAudioBox: false,
				showVideoBox: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				showUpdate: false,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_upload el-icon--left',
					name: '上传',
					action: 'importMedia'
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					size: "small",
					type: "danger",
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "multipleDeleteMedia"
				}
				]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			//选择资源类型查询
			selectMediaType() {
				this.getDatas();
			},
			//根据创建人查询
			findMediaByCreator() {
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].keyid);
				}
				return result;
			},
			//选择状态信息
			selectStatus() {
				if(this.status === 1) {
					this.audited = false;
					this.getDatas();
				} else {
					this.audited = true;
					this.getDatas();
				}
			},
			//预览或者试听
			preView(row) {
				// console.log(row);
				switch(row.type) {
					case 2:
					this.playAudioName = row.name;
					if(row.audited == true) {
						this.showAudioBox = true;
						this.playAudioUrl = row.url;
					} else {
							//若审核未通过，判断用户权限，只有admin用户可以预览
							if(GloabFun.getUid() == 'admin') {
								this.showAudioBox = true;
								this.playAudioUrl = row.url + '&uid=' + GloabFun.getUid() + '&token=' + GloabFun.getToken();
							} else {
								this.$notify({
									title: this.$t('message.warning'),
									message: '文件尚未审核，不可试听。',
									type: 'warning',
									duration: 2500
								});
							}
						}
						break;
						case 3:
						this.playVideoName = row.name;
						if(row.audited == true) {
							this.showVideoBox = true;
							this.playVideoUrl = row.url;
						} else {
							//若审核未通过，判断用户权限，只有admin用户可以预览
							if(GloabFun.getUid() == 'admin') {
								this.showVideoBox = true;
								this.playVideoUrl = row.url + '&uid=' + GloabFun.getUid() + '&token=' + GloabFun.getToken();
							} else {
								this.$notify({
									title: this.$t('message.warning'),
									message: '文件尚未审核，不可预览。',
									type: 'warning',
									duration: 2500
								});
							}
						}
						break;
					}
				}, 
			//审核文件
			auditedFile(row) {
				if(GloabFun.getUid() == 'admin') {
					this.$confirm('该操作将通过对此文件的审核，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var auditedParam = {
							audited: true,
							keyid: [row.keyid]
						}
						HttpServer.httpPost.call(this, '/Api/User/File/Update/Audited', auditedParam, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: '操作成功',
									type: 'success',
									duration: 2500
								});
							} else {
								this.getDatas();
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '无此操作权限',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//批量删除媒体文件
			multipleDeleteMedia() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除此媒体文件，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var deleteParam = {
							keyid: this.formateSelection()
						}
						HttpServer.httpPost.call(this, '/Api/User/File/Delete/Media', deleteParam, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.deleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.getDatas();
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].time.indexOf("T");
					var index2 = array[i].auditedtime.indexOf("T");
					array[i].time = array[i].time.substring(0, index1) + " " + array[i].time.substring(index1 + 1, index1 + 9);
					array[i].auditedtime = array[i].auditedtime.substring(0, index2) + " " + array[i].auditedtime.substring(index2 + 1, index2 + 9);
				}
			},
			selectFileType() {
				if(this.fileType === 2) {
					this.acceptTypes = 'mp3';
					this.uploadFileType = 2;
				} else {
					this.acceptTypes = 'mp4';
					this.uploadFileType = 3;
				}
			},
			//上传
			importMedia() {
				this.dialogUploadMedia = true;
			},
			uploadComplete() {
				this.getDatas();
				this.$notify({
					title: '成功',
					message: this.$t('message.uploadSuccess'),
					type: 'success',
					duration: 2500
				});
			},
			closeAudioBox() {
				this.showAudioBox = false;
				this.playAudioUrl = "";
			},
			closeVideoBox() {
				this.showVideoBox = false;
				this.playVideoUrl = "";
			},
			downloadMedia(row) {
				if(!row.existed) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '文件不存在',
						type: 'warning',
						duration: 2500
					});
				} else {
					if(row.audited) {
						window.location.href = row.url;
					} else {
						if(GloabFun.getUid() == 'admin') {
							window.location.href = row.url + '&uid=' + GloabFun.getUid() + '&token=' + GloabFun.getToken();
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: '文件尚未审核，不可下载。',
								type: 'warning',
								duration: 2500
							});
						}
					}
				}
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				var param = {
					audited: this.audited,
					index: this.currentPage,
					pagesize: this.pageSize,
					format:this.mediaType,
					createdby: this.creator
				}
				HttpServer.httpPost.call(this, '/Api/User/File/MediaFileInfo', param, function(response) {}, function(response) {
					// console.log('文件列表',response);
					if(response.data.code === 0) {
						this.formateData(response.data.Info_);
						this.tableData = response.data.Info_;
						this.totalSize = response.data.totalcount;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			},
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>